layui.define(["layer", "carousel"], function(exports) {
  var $ = layui.jquery;
  var layer = layui.layer;
  var carousel = layui.carousel;

  var renderDom = function(elem, stepItems, postion, closed = false) {
    var stepDiv = '<div class="lay-step">';
    for (var i = 0; i < stepItems.length; i++) {
      stepDiv += '<div class="step-item">';
      if (i < stepItems.length - 1) {
        if (i < postion) {
          stepDiv +=
            '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
        } else {
          stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
        }
      }

      var number = stepItems[i].number;
      if (!number) {
        number = i + 1;
      }
      if (i == postion || (i < postion && closed)) {
        stepDiv +=
          '<div class="step-item-head step-item-head-active"><i class="layui-icon">' +
          number +
          "</i></div>";
      } else if (i < postion) {
        stepDiv +=
          '<div class="step-item-head step-item-head-active"><i class="layui-icon layui-icon-ok"></i></div>';
      } else {
        stepDiv +=
          '<div class="step-item-head "><i class="layui-icon">' +
          number +
          "</i></div>";
      }

      var title = stepItems[i].title;
      var desc = stepItems[i].desc;
      if (title || desc) {
        stepDiv += '<div class="step-item-main">';
        if (title) {
          stepDiv += '<div class="step-item-main-title">' + title + "</div>";
        }
        if (desc) {
          stepDiv += '<div class="step-item-main-desc">&nbsp;' + desc + " </div>";
        }
        stepDiv += "</div>";
      }
      stepDiv += "</div>";
    }
    stepDiv += "</div>";

    $(elem).prepend(stepDiv);

    var bfb = 100 / stepItems.length;
    $(".step-item").css("width", bfb + "%");
  };

  var step = {
    param: null,
    index: 0,
    closed: false,

    render: function(param) {
      param.indicator = "none";
      param.arrow = "always";
      param.autoplay = false;

      if (!param.stepWidth) {
        param.stepWidth = "400px";
      }

      this.param = param;
      carousel.render(param);

      var stepItems = param.stepItems;
      renderDom(param.elem, stepItems, 0);
      $(".lay-step").css("width", param.stepWidth);

      carousel.on("change(" + param.filter + ")", function(obj) {
        $(param.elem)
          .find(".lay-step")
          .remove();
        renderDom(param.elem, stepItems, obj.index);
        $(".lay-step").css("width", param.stepWidth);
      });

      $(param.elem)
        .find(".layui-carousel-arrow")
        .css("display", "none");

      $(param.elem).css("background-color", "transparent");
    },

    changeTo: function (index) {
      this.index = index;

      $(this.param.elem)
      .find(".lay-step")
      .remove();
      renderDom(this.param.elem, this.param.stepItems, index);
      $(".lay-step").css("width", this.param.stepWidth);
    },

    next: function(elem) {
      $(elem)
        .find(".layui-carousel-arrow[lay-type=add]")
        .trigger("click");
    },

    pre: function(elem) {
      $(elem)
        .find(".layui-carousel-arrow[lay-type=sub]")
        .trigger("click");
    },

    close: function() {
      this.closed = true;
      $(this.param.elem)
        .find(".lay-step")
        .remove();
        renderDom(this.param.elem, this.param.stepItems, this.index, true);
        $(".lay-step").css("width", this.param.stepWidth);

      $(".lay-step").addClass('lay-step-closed');
    }
  };
  exports("step", step);
});
